<template>
  <div class="kpi-cards">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="kpi-card">
          <div class="kpi-content">
            <div class="kpi-icon weekly">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="kpi-info">
              <div class="kpi-title">本周问题数</div>
              <div class="kpi-value">{{ kpiData.weeklyIssues }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="kpi-card">
          <div class="kpi-content">
            <div class="kpi-icon monthly">
              <el-icon><DataAnalysis /></el-icon>
            </div>
            <div class="kpi-info">
              <div class="kpi-title">本月问题数</div>
              <div class="kpi-value">{{ kpiData.monthlyIssues }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="kpi-card">
          <div class="kpi-content">
            <div class="top-model-icon">
              <el-icon><Trophy /></el-icon>
            </div>
            <div class="kpi-info">
              <div class="kpi-title">Top型号</div>
              <div class="kpi-value">{{ kpiData.topModel }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { useAnrStore } from '../stores/anr'
import { storeToRefs } from 'pinia'
import { Calendar, DataAnalysis, Trophy } from '@element-plus/icons-vue'

const anrStore = useAnrStore()
const { kpiData } = storeToRefs(anrStore)
</script>

<style scoped>
.kpi-cards { margin-bottom: 20px; }
.kpi-card { height: 120px; }
.kpi-content { display: flex; align-items: center; height: 100%; }
.kpi-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; margin-right: 16px; }
.kpi-icon.weekly { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.kpi-icon.monthly { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.kpi-info { flex: 1; }
.kpi-title { font-size: 14px; color: #909399; margin-bottom: 8px; }
.kpi-value { font-size: 28px; font-weight: bold; color: #303133; }
.top-model-icon { width: 60px; height: 60px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #e6a23c; margin-right: 16px; }
</style>